<template>
  <div v-if="!isWebview" class="bread">
    <div class="frame-Gxs-1">
      <div v-for="(item, i) in siteBreads" :key="i" class="frame-gxh-1">
        <div class="text-COo-1">
          <div class="p-text-COo-1">
            <a v-if="item.href" :href="item.href" class="span-FMA-1">{{ item.text }}</a>
            <span v-else class="span-FMA-1">{{ item.text }}</span>
          </div>
        </div>
        <div v-if="i + 1 < siteBreads.length" class="frame-PLb-2">
          <div class="img-lmU-1"></div>
        </div>
      </div>
    </div>
    <slot></slot>
  </div>
  <div v-else class="webview-gap"></div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default () {
        return [
          {text: '首页', href: '/'}
        ]
      }
    }
  },
  data () {
    return {

    }
  },

  computed: {
    isWebview() {
      return this.$store.state.isWebview
    },
    siteBreads() {
      return this.$store.state.siteBreads
    }
  },

  beforeCreate () {
    let siteCategory = this.$store.getters.siteCategory || []
    let query = this.$root.context.query
    let path = this.$root.context.route.path
    let arr = []
    siteCategory.forEach(item => {
      if (String(item.id) === String(query.cid) || (!query.cid && String(path).indexOf(item.url) > -1)) {
        arr.push(item)
      } else if (item.children) {
        item.children.forEach(node => {
          if (String(node.id) === String(query.cid) || (!query.cid && String(path).indexOf(node.url) > -1)) {
            arr.push(item)
            arr.push(node)
          }
        })
      }
    })
    arr = arr.map(item => {
      return {
        text: item.cateName,
        href: item.url
      }
    })
    arr.unshift({text: '首页', href: '/'})
    this.$store.commit('SET_SITE_BREADS', arr)
  }
}
</script>

<style lang="less" scoped>
@import '../assets/css/bread.less';
.webview-gap {
  height: 8px;
}
</style>
